<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件学习</title>
<!--    <script src="vue.js" type="text/javascript" charset="UTF-8"></script>-->
</head>
<body>

    <div id="app">
<!--        <button-counter></button-counter>-->
<!--        <myCom></myCom>-->
        <my-button title="title1" v-on:click="click_function">
            <h2>I‘m h2 label</h2>
        </my-button>
        <my-button></my-button>
    </div>
<!--    js逻辑实现-->
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script>
        // Vue.component(“组件名称”,"{组件对象}")
        // 第二个参数是以对象的形式传入。
        // 子单元通过 prop 接口与父单元进行了良好的解耦
        Vue.component("my-button",{
            props: ['title'],
            // mybutton 组件现在接受一个
            // "prop"，类似于一个自定义 attribute。
            // 这个 prop 名为 title。
            data:function (){
                return{
                    count: 0
                }
            },
            template:'<div><h1>h1 label</h1><button v-on:click="click_function">点击了{{count}}次</button><slot></slot></div>',
            //<slot></slot>slot标签可以在组件中添加不同的内容。
            methods: {
                click_function: function (){
                    this.count++
                    this.$emit('click',this.count);
                //  组件的事件绑定，
                //  参数： 1.事件名称
                //        2.携带的参数列表，参数列表可以传递出去。
                //  this指代Component里面的变量，即data内部的count。

                }
            }
        })
        let app = new Vue({
            el: '#app',
            data: {},
            methods:{
                click_function:function (e){
                    console.log(e)
                }
            }
        })

    </script>

</body>
</html>